﻿@{
    ViewData["Title"] = "Home Page";
}
@using Personalblog.Model.ViewModels
@using Personalblog.Model.Entitys
@model HomeViewModel

@section head{
    <style>
    .card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
        .flip{
            transition: transform ease-in-out 1.2s;
            transform-style: preserve-3d;
        }

        .flip-container:hover .flip {
            /*transform: rotateX(360deg);*/
            transform: rotateY(-180deg);
        }

        .flip-container:not(:hover) .flip {
            transform: rotateY(0deg);
        }


       .roller {
         list-style: none;
         margin: 0;
         padding: 0;
         width: 100%;
         height: 100%;
         overflow: auto;
         scroll-snap-type: y mandatory;
       }
       
       .roller li {
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         font-weight: bold;
         font-size: 1.2rem;
         color: #333;
         scroll-snap-align: center;
       }
       .roller:before{
        height:20px;
       }
       
       .roller-wrapper {
               height:60px;
         position: relative;
         border-radius: 12px;
       }
       
       .roller-wrapper::after {
         content: '';
         position: absolute;
         top: 2px;
         width: 100%;
         height: 30px;
         box-shadow: 0px 4px 12px rgba(0, 0, 0, .12);
         border-top: 1px solid rgba(0, 0, 0, .12);
         border-bottom: 1px solid rgba(0, 0, 0, .12);
         pointer-events: none;
       }
       
       .roller li:last-child {
         margin-bottom: 40px;
       }
       .recommendation{
           position: absolute;
           top: 0;
           right: 0;         
           color: white;
           padding: 5px;
           font-size: 14px;
           font-weight: bold;
       }
       .recommendation-first {
            background-color: darkgray;
       }
      .recommendation-last {
           background-color: lightskyblue;
      }
    </style>
}

@await Html.PartialAsync("Widgets/BackTop", new BackToTopViewModel {IsShowText = false})

<div class="container py-5">
  <div class="row">
    <div class="col-lg-6">
      <h1 class="display-4 fw-bold mb-4">ZY 知识库</h1>
        <p class="lead mb-4">这是一个用于分享知识和经验的平台，我会在这里分享一些我学习和工作中的经验和心得，希望能够对你有所帮助。</p>
            <div class="lead">
                <p>一句诗：{{poemSimple}}</p>
                <p>一言：{{hitokoto}}</p>
            </div>
      <div class="d-flex flex-column flex-sm-row">
        <a class="btn btn-primary btn-lg px-4 me-md-2 mb-3 mb-sm-0" role="button" asp-controller="About" asp-action="Index">了解更多</a>
        <div class="d-flex flex-row ms-sm-3">
            <a class="btn btn-outline-secondary btn-lg px-4 me-2" asp-controller="Blog" asp-action="RandomPost">看文</a>
            <a class="btn btn-outline-secondary btn-lg px-4" asp-controller="Photo" asp-action="RandomPhoto">看图</a>
        </div>
      </div>
    </div>
    <div class="col-lg-6 mt-4 mt-lg-0 mb-4">
        <div class="row d-flex flex-column">
            <div class="col-lg-12 mb-3">
                <div class="card">
                    <div class="card-header">
                        <h4>网站通知列表</h4>
                    </div>
                    <div class="card-body">
                        <div class="roller-wrapper">
                            <ul class="roller">
                                @if (Model.Notices.Any())
                                {
                                    @foreach (var n in Model.Notices)
                                    {
                                        <li>@n.Content</li>
                                    }
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 mb-3">
                <div class="row d-flex flex-wrap justify-content-between mb-4">
                    @{
                        var firstPost = @Model.FeaturedPosts.First();
                        var firstPostModel = new FeaturedPostTopCardModel { FeaturedPost = firstPost, Number = 1 };
                        <partial name="Widgets/FeaturedPostTopCard" model="firstPostModel"/>
                    }
                   @{
                       var lastPost = @Model.FeaturedPosts.Last();
                       var lastPostModel = new FeaturedPostTopCardModel { FeaturedPost = lastPost, Number = 2 };
                       <partial name="Widgets/FeaturedPostTopCard" model="lastPostModel"/>
                   }
                </div>
            </div>
        </div>
    </div>
  </div>
</div>


<div class="container px-4 py-3" id="custom-cards">
    <h2 class="pb-2 border-bottom">Photography</h2>
    @if (Model.FeaturedPhotos.Any())
    {
        <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
            @foreach (var photo in Model.FeaturedPhotos)
            {
                <div class="col  flip-container">
                    <partial name="Widgets/PhotoCardSmall" model="photo" />
                </div>
            }
        </div>
    }
    else
    {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "推荐图片")
    }

</div>

<div class="container px-4 py-3" id="featured-3">
    <h2 class="pb-2 border-bottom">Blog Categories</h2>
    @if (Model.FeaturedCategories.Any())
    {
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            @foreach (var fc in Model.FeaturedCategories)
            {
                @await Html.PartialAsync("Widgets/FeaturedCategoryCard", fc)
            }
        </div>
    }
    else
    {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "推荐分类")
    }

</div>

<div class="container px-4 py-3">
    <h2 class="pb-2 border-bottom">Top Blog Posts</h2>

    @if (Model.TopPost != null)
    {
        <partial name="Widgets/TopPostCard" model="Model.TopPost" />
    }
    else
    {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "置顶博客")
    }


    @if (Model.FeaturedPosts.Any())
    {
        <div class="row mb-2">
            @foreach (var post in @Model.FeaturedPosts)
            {
                <partial name="Widgets/FeaturedPostCard" model="post" />
            }
        </div>
    }
    else
    {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "推荐博客")
    }
</div>

<div class="container px-4 py-3">
    <h2 class="pb-2 border-bottom">Link Exchange</h2>
    @if (Model.Links.Any())
    {
        <div class="d-grid gap-2 d-md-block">
            @foreach (var link in Model.Links)
            {
                @await Html.PartialAsync("Widgets/ColorfulButton",
        new ColorfulButtonViewModel { Name = link.Name, Url = link.Url })
            }
        </div>
    }
    else
    {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "友情链接")
    }
</div>

@section bottom{
    @* <script src="~/js/chart.js"></script> *@
    @if(Model.TopPost != null){
        <script>const CHART_VISIBLE = false</script>
    }else{
        <script>const CHART_VISIBLE = false</script>
    }
    <script type="module" src="~/js/home.js"></script>
}